<template>
<div class="area-linkage">
  <el-row :gutter="10">
    <el-col :span="spanNumber">
      <el-select filterable size="mini" :class="['area-linkage-province', spanNumber===24? 'full':'']" :disabled="disabled" v-model.trim="province"  :placeholder="$t('public.pleasePick')" @change="changeProvince">
        <el-option
          v-for="item in provinces"
          @click.native="resetCity"
          :label="item.label"
          :value="item.value"
          :key="item.value">
        </el-option>
      </el-select>
    </el-col>
    <el-col :span="spanNumber">
      <el-select filterable size="mini" :class="['area-linkage-city', spanNumber===24? 'full':'']"  :disabled="disabled" v-model.trim="city" :placeholder="$t('public.pleasePick')" @change="changeCity">
        <el-option
          v-for="item in cities"
          :label="item.label"
          :value="item.value"
          :key="item.value">
        </el-option>
      </el-select>
    </el-col>
    <el-col :span="spanNumber" v-show="!onlyProvinceAndCity">
      <el-select filterable size="mini" :class="['area-linkage-district', spanNumber===24? 'full':'']" :disabled="disabled" v-model.trim="district" :placeholder="$t('public.pleasePick')">
        <el-option
          v-for="item in counties"
          :label="item.label"
          :value="item.value"
          :key="item.value">
        </el-option>
      </el-select>
    </el-col>
  </el-row>

</div>
</template>
<script>
  import { getCityValue } from '@/utils/customerUtils'
  export default {
    name: 'AreaLinkage',
    data () {
      return {
        provinces: [],
        province: null,
        city: null,
        district: null,
        initCity: false,
        initDistrict: false,
        provinceCache: { options: [] }
      }
    },
    props: {
      loyout: {
        type: String,
        default: 'inline'
      },
      isMerge: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      },
      isSearch: {
        type: Boolean,
        default: false
      },
      onlyProvinceAndCity: {
        type: Boolean,
        default: false
      },
      currentIndex: {
        type: Number,
        default: 0
      },
      provinceName: String,
      provinceValue: String,
      cityName: String,
      cityValue: String,
      districtValue: String,
      districtName: String,
      advAreaObj: Object
    },
    computed: {
      spanNumber () {
        let n = 8
        switch (this.loyout) {
          case 'inline':
            n = 8
            break
          case 'full':
            n = 24
            break
          default:
            n = 8
            break
        }
        return n
      },
      allOrPlease () {
        return this.isSearch ? this.$t('public.pleasePick') : this.$t('public.all')
      },
      cities () {
        let cities = []
        let options = this.provinceCache.options
        if (this.province) {
          for (let i = 0; i < options.length; i++) {
            if (options[i].key === this.province) {
              cities = options[i].options
              break
            }
          }
        }
        return [{ label: this.allOrPlease, value: '', options: [] }, ...cities.map(city => ({ label: city.name, value: city.key, options: [...city.options] }))]
      },
      counties () {
        let counties = []
        if (this.city) {
          for (let i = 0; i < this.cities.length; i++) {
            if (this.cities[i].value === this.city) {
              counties = this.cities[i].options
              break
            }
          }
        }
        return [{ label: this.allOrPlease, value: '' }, ...counties.map(district => ({ label: district.name, value: district.key }))]
      },
      emitValue () {
        let province = this.province
        let city = this.city
        let district = this.district
        this.provinces.forEach(item => {
          province = (item.value && item.value === province) && this.isMerge ? `${province}__${item.label}` : province
        })
        this.cities.forEach(item => {
          city = (item.value && item.value === city) && this.isMerge ? `${city}__${item.label}` : city
        })
        this.counties.forEach(item => {
          district = (item.value && item.value === district) && this.isMerge ? `${district}__${item.label}` : district
        })
        if (this.onlyProvinceAndCity) {
          let currentIndex = this.currentIndex
          return {province, city, district, currentIndex}
        }
        return {province, city, district}
      }
    },
    methods: {
      // 当省被点击选中的时候 初始化 市县的数据
      resetCity () {
        this.city = null
        this.district = null
      },
      changeProvince (value) {
        if (this.province !== null && !this.initCity) {
          this.city = ''
          this.district = ''
        }
        this.initCity = false
      },
      changeCity (value) {
        if (this.city !== null && !this.initDistrict) {
          this.district = ''
        }
        this.initDistrict = false
      }
    },
    mounted () {
      Promise.all([
        this.$store.dispatch('getCache', { type: 'options', id: 'd7b9c68a-b50f-21d1-d5fd-41ea93f5f49c' }),
        this.$store.dispatch('getCache', { type: 'getOldDic' })
      ]).then(([provinceCache, oldDic]) => {
        this.provinceCache = provinceCache
        let provinces = [{ label: this.allOrPlease, value: '' }, ...provinceCache.options.map(province => ({ label: province.name, value: `${province.key}`, options: province.options }))]
        this.provinces = provinces || []
        this.province = this.provinceValue || null

        // 获取市区 县的值 如果有老数据 则比对出相对应的新数据
        let newData = oldDic || []
        let ctiyOrDistrict = getCityValue(newData, this.cityValue)
        if (!ctiyOrDistrict) {
          this.city = this.cityValue || null
          this.district = this.districtValue || null
        } else {
          this.city = ctiyOrDistrict.city
          this.district = ctiyOrDistrict.distric
        }
        this.initCity = true
        this.initDistrict = true
      })
    },
    watch: {
      emitValue (cur, old) {
        if (!this.initCity) {
          this.$emit('valueChange', cur, 'areaLinkage')
        }
      },
      provinceValue (curr, prev) {
        if (curr === null) {
          this.province = null
        } else if (curr === '') {
          this.province = ''
        } else if (curr) {
          this.province = curr
//          this.initCity = true
        }
      },
      cityValue (curr, prev) {
        if (curr === null) {
          this.city = null
        } else if (curr === '') {
          this.city = ''
        } else if (curr) {
          this.city = curr
          this.initDistrict = true
        }
      },
      advAreaObj (curr, prev) {
        if (curr) {
          this.city = curr.city
          this.province = curr.province
        }
      },
      districtValue (curr, prev) {
        if (curr === null) {
          this.district = null
        } else if (curr === '') {
          this.district = ''
        } else if (curr) {
          this.district = curr
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
.full
  width 100%
</style>
